
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人云笔记网站自动化测试报告</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; }
        .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .header { text-align: center; margin-bottom: 30px; }
        .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .summary-card { background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center; }
        .summary-card h3 { margin: 0 0 10px 0; color: #333; }
        .summary-card .number { font-size: 2em; font-weight: bold; }
        .passed { color: #28a745; }
        .failed { color: #dc3545; }
        .total { color: #007bff; }
        .rate { color: #6f42c1; }
        .test-results { margin-top: 30px; }
        .test-item { margin-bottom: 20px; padding: 15px; border-radius: 8px; border-left: 4px solid #ddd; }
        .test-item.success { background-color: #d4edda; border-left-color: #28a745; }
        .test-item.failure { background-color: #f8d7da; border-left-color: #dc3545; }
        .test-name { font-weight: bold; font-size: 1.1em; margin-bottom: 5px; }
        .test-message { color: #666; margin-bottom: 5px; }
        .test-time { font-size: 0.9em; color: #999; }
        .screenshot { max-width: 300px; margin-top: 10px; border-radius: 4px; cursor: pointer; }
        .screenshot:hover { opacity: 0.8; }
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); }
        .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; }
        .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; }
        .close:hover { color: #bbb; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>个人云笔记网站自动化测试报告</h1>
            <p>测试网站: <strong>http://192.140.160.81</strong></p>
            <p>测试时间: <strong>2025-08-06 11:35:14</strong></p>
        </div>
        
        <div class="summary">
            <div class="summary-card">
                <h3>总测试数</h3>
                <div class="number total">33</div>
            </div>
            <div class="summary-card">
                <h3>通过测试</h3>
                <div class="number passed">22</div>
            </div>
            <div class="summary-card">
                <h3>失败测试</h3>
                <div class="number failed">11</div>
            </div>
            <div class="summary-card">
                <h3>成功率</h3>
                <div class="number rate">66.7%</div>
            </div>
        </div>
        
        <div class="test-results">
            <h2>详细测试结果</h2>

            <div class="test-item success">
                <div class="test-name">✅ 浏览器设置</div>
                <div class="test-message">Chrome浏览器启动成功</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:35</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 网站可访问性</div>
                <div class="test-message">网站正常访问，状态码: 200</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:36</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 页面加载</div>
                <div class="test-message">页面加载成功，标题: 笔记云 - 个人笔记与文件管理平台</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:41</div>
                <img src="test_screenshots/page_load_1754451281.png" alt="截图" class="screenshot" onclick="openModal(this.src)">
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ 登录功能</div>
                <div class="test-message">登录后仪表盘未显示</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:43</div>
                <img src="test_screenshots/login_failed_1754451282.png" alt="截图" class="screenshot" onclick="openModal(this.src)">
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 仪表盘加载</div>
                <div class="test-message">仪表盘加载成功，包含4个统计卡片</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:44</div>
                <img src="test_screenshots/dashboard_loaded_1754451284.png" alt="截图" class="screenshot" onclick="openModal(this.src)">
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 导航-仪表盘</div>
                <div class="test-message">仪表盘页面切换成功</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:47</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 导航-笔记管理</div>
                <div class="test-message">笔记管理页面切换成功</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:49</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 导航-文件管理</div>
                <div class="test-message">文件管理页面切换成功</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:51</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 导航菜单</div>
                <div class="test-message">所有3个菜单项测试通过</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:51</div>
                <img src="test_screenshots/navigation_test_1754451291.png" alt="截图" class="screenshot" onclick="openModal(this.src)">
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 笔记-新建按钮</div>
                <div class="test-message">新建笔记按钮可用</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:54</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 笔记-搜索功能</div>
                <div class="test-message">笔记搜索输入框正常</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:55</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 笔记-排序功能</div>
                <div class="test-message">笔记排序选择器正常</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:55</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 笔记管理</div>
                <div class="test-message">笔记管理页面基本功能测试完成</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:55</div>
                <img src="test_screenshots/notes_management_1754451295.png" alt="截图" class="screenshot" onclick="openModal(this.src)">
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ 文件-上传按钮</div>
                <div class="test-message">未找到文件上传按钮</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:59</div>
                
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ 文件-新建文件夹</div>
                <div class="test-message">未找到新建文件夹按钮</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:59</div>
                
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ 文件-视图切换</div>
                <div class="test-message">未找到文件视图切换按钮</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:59</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 文件管理</div>
                <div class="test-message">文件管理页面基本功能测试完成</div>
                <div class="test-time">测试时间: 2025-08-06 11:34:59</div>
                <img src="test_screenshots/file_management_1754451299.png" alt="截图" class="screenshot" onclick="openModal(this.src)">
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 用户菜单</div>
                <div class="test-message">用户菜单显示正常，包含3个选项</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:01</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 全局搜索</div>
                <div class="test-message">全局搜索输入正常</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:04</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 响应式-桌面端</div>
                <div class="test-message">桌面端(1920x1080)显示正常</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:06</div>
                <img src="test_screenshots/responsive_桌面端_1754451306.png" alt="截图" class="screenshot" onclick="openModal(this.src)">
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 响应式-平板端</div>
                <div class="test-message">平板端(768x1024)显示正常</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:07</div>
                <img src="test_screenshots/responsive_平板端_1754451307.png" alt="截图" class="screenshot" onclick="openModal(this.src)">
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 响应式-手机端</div>
                <div class="test-message">手机端(375x667)显示正常</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:09</div>
                <img src="test_screenshots/responsive_手机端_1754451309.png" alt="截图" class="screenshot" onclick="openModal(this.src)">
            </div>

            <div class="test-item success">
                <div class="test-name">✅ 响应式设计</div>
                <div class="test-message">所有3种屏幕尺寸测试通过</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:09</div>
                
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ API-笔记统计</div>
                <div class="test-message">笔记统计API请求失败: Expecting value: line 1 column 1 (char 0)</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:10</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ API-笔记列表</div>
                <div class="test-message">笔记列表API正常</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:10</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ API-文件列表</div>
                <div class="test-message">文件列表API正常</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:10</div>
                
            </div>

            <div class="test-item success">
                <div class="test-name">✅ API-用户资料</div>
                <div class="test-message">用户资料API正常</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:10</div>
                
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ API端点测试</div>
                <div class="test-message">只有3/4个API正常</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:10</div>
                
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ JS错误</div>
                <div class="test-message">JavaScript错误: http://192.140.160.81/js/components/file-manager.js 106:3 Uncaught SyntaxError: Invalid regular expression: missing /</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:11</div>
                
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ JS错误</div>
                <div class="test-message">JavaScript错误: http://192.140.160.81/js/components/dashboard.js 271:14 "加载笔记统计失败:" Error: 服务器返回了HTML页面而不是JSON数据。状态码: 200
    at ApiClient.handleResponse (http://192.140.160.81/js/utils/api.js:57:17)
    at async Dashboard.loadNotesStats (http://192.140.160.81/js/components/dashboard.js:269:24)
    at async Promise.all (index 0)
    at async Dashboard.loadDashboardData (http://192.140.160.81/js/components/dashboard.js:243:54)</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:11</div>
                
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ JS错误</div>
                <div class="test-message">JavaScript错误: http://192.140.160.81/js/components/dashboard.js 231:14 "加载files数据失败:" ReferenceError: FileManager is not defined
    at Dashboard.loadViewData (http://192.140.160.81/js/components/dashboard.js:225:36)
    at Dashboard.switchView (http://192.140.160.81/js/components/dashboard.js:202:10)
    at HTMLAnchorElement.<anonymous> (http://192.140.160.81/js/components/dashboard.js:57:14)</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:11</div>
                
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ JS错误</div>
                <div class="test-message">JavaScript错误: http://192.140.160.81/js/components/dashboard.js 231:14 "加载files数据失败:" ReferenceError: FileManager is not defined
    at Dashboard.loadViewData (http://192.140.160.81/js/components/dashboard.js:225:36)
    at Dashboard.switchView (http://192.140.160.81/js/components/dashboard.js:202:10)
    at HTMLAnchorElement.<anonymous> (http://192.140.160.81/js/components/dashboard.js:57:14)</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:11</div>
                
            </div>

            <div class="test-item failure">
                <div class="test-name">❌ JavaScript错误检查</div>
                <div class="test-message">发现4个JavaScript错误</div>
                <div class="test-time">测试时间: 2025-08-06 11:35:11</div>
                
            </div>

        </div>
    </div>
    
    <!-- 图片模态框 -->
    <div id="imageModal" class="modal">
        <span class="close" onclick="closeModal()">&times;</span>
        <img class="modal-content" id="modalImage">
    </div>
    
    <script>
        function openModal(src) {
            document.getElementById('imageModal').style.display = 'block';
            document.getElementById('modalImage').src = src;
        }
        
        function closeModal() {
            document.getElementById('imageModal').style.display = 'none';
        }
        
        // 点击模态框外部关闭
        window.onclick = function(event) {
            var modal = document.getElementById('imageModal');
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }
    </script>
</body>
</html>
